<template>
	<view class="">
		<view class="box">
			<view class="deco">
				<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/24.png" mode=""></image>
			</view>
			<scroll-view scroll-y="true" class="contents">
			<view class="ul">
					
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/20.png" mode=""></image>
				</view>
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/21.jpg" mode=""></image>
				</view>
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/22.jpg" mode=""></image>
				</view>
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/23.jpg" mode=""></image>
				</view>
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/20.png" mode=""></image>
				</view>
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/21.jpg" mode=""></image>
				</view>
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/22.jpg" mode=""></image>
				</view>
				<view class="li">
					<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/23.jpg" mode=""></image>
				</view>
			
			</view>
			</scroll-view>
		</view>
		<view @click="copy" class="btns">
			<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/1.png" mode=""></image>
			查看更多
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {

			}
		},
		methods: {
			copy() {
				this.$emit('cancelFn')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns{
		width: 353rpx;
		height: 82rpx;
		background: #455FE8;
		border-radius: 100rpx;
		font-size: 38rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 37rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 77rpx auto;
		.icon{
			width: 34rpx;
			height: 23rpx;
			margin-right: 19rpx;
		}
		
	}
	.box {
		width: 624rpx;
		height: 841rpx;
		background: #1F278D;
		border-radius: 49rpx;
		border: 8rpx solid #8EA7FF;
		margin: 0 auto;
		position: relative;
		/deep/ .u-drawer-center{
			bottom: inherit !important; 
		}
		.deco{
			margin: -51rpx auto 0;
			width: 505rpx;
			height: 76rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #395CD8;
			border-radius: 84rpx;
			border: 5rpx solid #96C6FF;
			image{
				width: 451rpx;
				height: 46rpx;
			}
		}
		.contents{
			height: 772rpx;
		}
		.ul{
			padding:20rpx 26rpx;
			display: flex;
			flex-wrap: wrap;
			.li{
				margin-bottom: 12rpx;
				&:nth-child(2n+1){
					margin-right: 16rpx;
				}
				image{
					width: 271rpx;
					height: 369rpx;
					border-radius: 18rpx;
				}
			}
		}
	}
</style>
